<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
	<title>用户中心 - 学子商城</title>
	<link rel="icon" href="./img/favicon.ico">
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/user_basis.css">
</head>
<body>
	<!-- f1 头部 -->
	<div class="f1">
		<div class="container flex justify-space-between align-items-center">
			<div class="left flex align-items-center">
				<!-- logo -->
				<a href="./index.html" class="logo pe-40">
					<div></div>
				</a>
				<!-- 搜索框 -->
				<div class="search flex align-items-center">
					<input type="text" placeholder="笔记本">
					<a href="./products.html" class="searchicon">
						<span class="searchicon"></span>
					</a>
					<!-- 分类搜索 -->
					<div class="flex align-items-center cursor-pointer">
						<div>分类搜索</div>
						<div class="search-select"></div>
					</div>
				</div>
			</div>
			<!-- 用户导航 -->
			<div class="right">
				<ul class="usermenu flex align-items-center">
					<li class="flex align-items-center"><a href="#" class="heart"></a></li>
					<li class="flex align-items-center"><a href="#" class="list"></a></li>
					<li class="flex align-items-center"><a href="#" class="cart"></a></li>
					<li class="flex align-items-center">欢迎:<span id="uname"></span> <a href="./login.html">退出</a></li>
					<li class="flex align-items-center"><a href="#">用户中心</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- f2 导航栏 -->
	<div class="f2">
		<div class="container">
			<ul class="nav">
				<li class="nav-item"><a href="./index.html">首页</a></li>
				<li class="nav-item"><a href="./products.html">学习用品</a></li>
				<li class="nav-item"><a href="#">私人订制</a></li>
			</ul>
		</div>
	</div>
	<!-- f3 内容 -->
	<div class="f3">
		<div class="container">
			<!-- 面包屑 -->
			<div class="breadclumb flex">
				<div><a href="./index.html">首页</a></div>
				<div><a href="#">用户中心</a></div>
				<div><a href="#">个人信息修改</a></div>
			</div>
			<!-- 侧边栏 + 内容区 -->
			<div class="flex">
				<!-- 侧边栏 -->
				<div class="aside">
					<ul class="menu">
						<li class="menu-item">
							<a class="align-items-center cursor-pointer" data-xz-acordition="0">
								<span>我的订单</span>
								<img src="./img/myOrder1.png">
							</a>
							<ul class="acrodition-collapse cur">
								<li class="pt-25">
									<a class="text-default text-hover" href="#">全部订单</a>
									<span>99+</span>
								</li>
								<li><a class="text-default text-hover" href="#">待付款</a></li>
								<li>
									<a class="text-default text-hover" href="#">待收货</a>
									<span>1</span>
								</li>
								<li><a class="text-default text-hover" href="#">待评价</a></li>
								<li><a class="text-default text-hover" href="#">退货退款</a></li>
							</ul>
						</li>
						<li class="menu-item">
							<a class="align-items-center cursor-pointer" data-xz-acordition="1" >
								<span>我的优惠券</span>
								<img src="./img/myOrder1.png">
							</a>
							<ul class="acrodition-collapse" >
								<li>
									<a href="#" class="text-default text-hover">已使用</a>
									<span>1</span>
								</li>
							</ul>
						</li>
						<li class="menu-item">
							<a class="align-items-center  cursor-pointer" data-xz-acordition="2"> 
								<span>收货地址</span>
								<img src="./img/myOrder1.png">
							</a>
							<ul class="acrodition-collapse">
								<li><a href="#" class="text-default text-hover">地址管理</a></li>
							</ul>
						</li>
						<li class="menu-item">
							<a class="align-items-center cursor-pointer" data-xz-acordition="3">
								<span>账号管理</span>
								<img src="./img/myOrder1.png">
							</a>
							<ul class="acrodition-collapse" >
								<li class="pt-25"><a class="text-default text-hover" href="#">我的信息</a></li>
								<li><a class="text-default text-hover" href="#">个人头像</a></li>
								<li><a class="text-default text-hover" href="#">安全管理</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- 内容区 -->
				<div class="article">
					<div class="tabs flex">
						<div><a href="#" class="text-default active" data-xz-toggle="0">我的信息</a></div>
						<div><a href="#" class="text-default">个人头像</a></div>
						<div><a href="#" class="text-default" data-xz-toggle="1">安全管理</a></div>
					</div>
					<div class="section tabs-items">
						<!-- 我的信息 -->
						<div class="current">
							<!-- 我的头像 -->
							<div class="row1 flex align-items-center">
								<div class="col text-end">我的头像:</div>
								<div class="col avatar flex align-items-center">
									<img src="./img/default.png">
								</div>
								<div class="col cursor-pointer size-14 text-theme font-bold">更改头像</div>
							</div>
							<!-- 用户名 -->
							<div class="row2">
								<label for="userName">用户名：</label>
								<input type="text" id="userName">
							</div>
							<!-- 性别 -->
							<div class="row2">
								<label for="sex">性别：</label>
								<div class="checkbox-group flex ps-10">
									<div>
										<input type="radio" name="sex" value="1" checked>男
									</div>
									<div class="ps-30">
										<input type="radio" name="sex" value="0">女
									</div>
								</div>
							</div>
							<!-- 绑定电话 -->
							<div class="row2">
								<label for="phone">绑定电话：</label>
								<input type="text" id="phone" value="">
							</div>
							<!-- 绑定邮箱 -->
							<div class="row2">
								<label for="email">绑定邮箱：</label>
								<input type="text" id="email" value="">
							</div>
							<!-- 保存按钮 -->
							<div class="row3">
								<div class="savebtn cursor-pointer">保存更改</div>
							</div>
						</div>
						<!-- 安全管理 -->
						<div>
							<div>安全管理的内容</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f4 功能菜单 -->
	<div class="f4">
		<div class="container">
			<ul class="menu flex">
				<li>
					<div class="icon1">
						<div></div>
					</div>
					<div>品质保障</div>
				</li>
				<li>
					<div class="icon2">
						<div></div>
					</div>
					<div>私人订制</div>
				</li>
				<li>
					<div class="icon3">
						<div></div>
					</div>
					<div>学员特供</div>
				</li>
				<li>
					<div class="icon4">
						<div></div>
					</div>
					<div>专属特权</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- f5 底部 -->
	<div class="f5">
		<div class="container">
			<div class="flex">
				<!-- logo -->
				<div>
					<a href="./index.html" class="logo">
						<div></div>
					</a>
					<div class="footerFonts"></div>
				</div>
				<!-- 底部列表 -->
				<div>
					<div class="footerlistTitle">
						<ul class="flex">
							<li>买家帮助</li>
							<li>商家帮助</li>
							<li>关于我们</li>
						</ul>
					</div>
					<div class="footerlistMain flex">
						<ul>
							<li><a href="#" class="text-default text-hover">新手指南</a></li>
							<li><a href="#" class="text-default text-hover">服务保障</a></li>
							<li><a href="#" class="text-default text-hover">常见问题</a></li>
						</ul>
						<ul>
							<li><a href="#" class="text-default text-hover">商家入驻</a></li>
							<li><a href="#" class="text-default text-hover">商家后台</a></li>
						</ul>
						<ul>
							<li><a href="#" class="text-default text-hover">关于达内</a></li>
							<li><a href="#" class="text-default text-hover">联系我们</a></li>
							<li></li>
						</ul>
					</div>
				</div>
				<!-- 客户端 -->
				<div class="flex align-items-center">
					<div class="khd">
						<div class="text-center py-5">学子商城客户端</div>
						<div class="android"></div>
						<div class="ios"></div>
					</div>
					<div class="erweima"></div>
				</div>
			</div>
			<!-- 版权声明部分 -->
			<div class="text-center pb-30">&copy;2017&nbsp;达内科技有限公司&nbsp;版权所有&nbsp;京ICP备08000853号-75</div>
		</div>
	</div>
</body>
<script>
	// 标签栏切换
	const tabs = document.querySelectorAll('.tabs>div')
	tabs.forEach(value => 
		value.onclick = function() {
			const tabs_item = this.children[0]
			const active = document.querySelector('.tabs .active')
			// 之前的class=active元素 移除样式
			active.classList.remove('active')
			// 为当前项添加样式
			tabs_item.classList.add('active')
			// 取当前项自定义属性的值作为另一个元素的下标
			const index = tabs_item.dataset.xzToggle
			const tabs_sections = document.querySelectorAll('.section>div')
			const cur = document.querySelector('.section .current')
			cur.classList.remove('current')
			tabs_sections[index].classList.add('current')
		}
	)
	// 手风琴
	const collapse_items = document.querySelectorAll('.acrodition-collapse')
	const acorditions = document.querySelectorAll('.menu-item>a')
	acorditions.forEach(value => 
		value.onclick = function() {
			const index = this.dataset.xzAcordition
			const cur = document.querySelector('.acrodition-collapse.cur')
			cur.classList.remove('cur')
			collapse_items[index].classList.add('cur')
		}
	)
	window.onload = () => {
		let xhr = new XMLHttpRequest()
		xhr.open('GET','/v2/users/user_basis/6')
		xhr.onload = () => {
			let data = JSON.parse(xhr.responseText).data
			uname.innerHTML = data[0]['uname']
			userName.value = data[0]['user_name']
			email.value = data[0]['email']
			phone.value = data[0]['phone']
		}
		xhr.send()
	}
	// 保存修改
	let savebtn = document.querySelector('.savebtn')
	let sex = document.querySelectorAll("input[name='sex']")
	savebtn.onclick = () => {
		let xhr = new XMLHttpRequest()
		xhr.open('put','/v2/users/user_put')
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
		xhr.onload = () => {
			let data = JSON.parse(xhr.responseText)
			if(data.code == 200) {
				alert('修改个人信息成功')
			}else {
				alert('修改失败')
			}
		}
		xhr.send(`uid=${6}&user_name=${userName.value}&email=${email.value}&phone=${phone.value}&gender=${sex[0].value}`)
	}
</script>
</html>